<template>
   <div class="newsinfo-contaniner">
       <h4 class="title">{{newsinfo.title}}</h4>
       <p class="subtitle">
           <span>发表时间:{{newsinfo.add_time | dateFormat}}</span>
           <span>点击:{{newsinfo.click}}次</span>
       </p>
       <hr>
         
        <div class="content" v-html="newsinfo.content"></div>

        <!-- 评论子组件 -->
        <comment-box></comment-box>
   </div>
</template>

<script>
import {Toast} from "mint-ui"

// 导入子组件
import comment from "../subcomonents/comment.vue"
    export default{
      data(){
          return {
              newsinfo :[] //渲染新闻详情
          }
      },
      created () {
        this.getNewsInfo()  
      },
      methods: {
          getNewsInfo(){ //获取新闻详情
               var id = this.$route.params.id
               this.$http.get("api/getnew/" + id).then(result => {
                   if(result.body.status === 0){
                      this.newsinfo = result.body.message[0]
                   }else {
                       Toast("失败")
                   }
               })
          }
      },
      components:{ //注册自己的子组件
         "comment-box":comment
      }
    }
</script>

<style lang="scss">
   .newsinfo-contaniner{
       padding: 0 3px;
       .title{
         color:#226aff;
         font-size:16px;
         text-align: center;
         margin:15px 0;
       }
       .subtitle{
          color:#226aff;
          font-size:12px;
          display: flex;
          justify-content: space-between;
       }
       .content{
         img{
           width: 100%;
         }
       }
   }
</style>
